<template>
	<view class="" @click="show = false">
		<uni-nav-bar backgroundColor="" left-icon="back" fixed @clickLeft="$pageBack()" :border="false" :status-bar="true" title="查询"></uni-nav-bar>
		<image class="bcg" src="/static/ibcg.png" mode=""></image>
		<view class="container">
			<view class="top_text">
				查询
				<text>{{ type == 1 ? '在售' : '变现' }}</text>
				价
			</view>
			<view class="index-search">
				<view class="search">
					<view class="l">
						<uni-icons type="search" size="20" color="#D1D1D6"></uni-icons>
					</view>
					<view class="c">
						<input
							class="uni-input"
							v-model="kw"
							confirm-type="search"
							placeholder="输入商品名称(支持模糊搜索)"
							placeholder-style="color:#D1D1D6;font-size: 28rpx;"
							@input="handleInput"
							@confirm="confirm"
						/>
					</view>
					<view class="r" @click="confirm">查询</view>
				</view>
				<view class="searchbtns" v-if="verifyUpWx == 0">
					<image class="img" src="/static/rm.png" mode=""></image>
					<view class="btns">
						<view class="itmes flex" v-for="(item, index) in searchList" :key="index" @click="changeWord(item.word)">
							<!-- @click.stop="$previewImage([item.icon])" -->
							<image :src="item.icon" mode="aspectFill"></image>
							<view class="">
								{{ item.word }}
							</view>
						</view>
					</view>
				</view>
				<view class="s-list" v-if="show">
					<view class="item u-flex u-col-center u-row-between" v-for="(item, index) in list" :key="index" @click="toSearch(item.name)">
						<view class="l">
							<uni-icons type="search" size="20" color="#D1D1D6"></uni-icons>
						</view>
						<view class="c u-l-1">
							<rich-text :nodes="item.name2"></rich-text>
						</view>
						<view class="r">
							<image src="@/static/search2.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="m-pop">
				<uni-icons type="closeempty" size="22" color="#AEAEAE" class="icons" @click="close"></uni-icons>
				<image src="@/static/ad1.png" mode="aspectFill"></image>
				<view class="tips">
					当前每日免广告查询次数为1次
					<br />
					本次查询需看完整广告
				</view>
				<view class="btns u-flex u-col-center u-row-between">
					<view class="btn btn1" @click="close">暂不</view>
					<view class="btn btn2" @click="handleok">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { login, messageSeecount, webconfig, inputSearch, getEidToken, getorder, gethot } from '@/common/http.api.js';

export default {
	data() {
		return {
			wxsearch: '',

			show: false,
			kw: '',
			type: 2,
			list: [],
			name: '',

			ad: null,
			verifyUpWx: 0,
			searchList: [],
			pathID: 0
		};
	},
	onUnload() {
		if (this.ad) {
			this.ad.offClose(this.onCloseListener);
			this.ad.destroy();
		}
	},
	onLoad(option) {
		this.type = option.type;
		this.getwebconfig();
		gethot().then((res) => {
			if (res.code == 200) {
				this.searchList = res.data;
			}
		});
	},
	methods: {
		confirm() {
			this.toSearch(this.kw);
		},
		handleInput() {
			this.list = [];
			this.show = true;
			if (!this.kw) {
				return;
			}
			inputSearch({
				name: this.kw,
				type: this.type
			}).then((res) => {
				if (res.code == 200) {
					let list = res.data;
					if (list.length > 0) {
						this.list = list.map((item) => {
							let name2 = '';
							if (item.includes(this.kw)) {
								const wrappedStr = item.replace(new RegExp(this.kw, 'g'), `<span style="color:#FF6F07">${this.kw}</span>`);
								name2 = wrappedStr;
							} else {
								name2 = item;
							}
							return {
								name: item,
								name2: name2
							};
						});
						this.show = true;
					} else {
						this.list = [];
						this.show = false;
					}
				}
			});
		},
		changeWord(name) {
			this.kw = name;
		},
		toSearch(name) {
			this.name = name;
			const dateObj = new Date();
			const year = dateObj.getFullYear(); // 获取当前年份
			const month = ('0' + (dateObj.getMonth() + 1)).slice(-2); // 获取当前月份，其中需要将月份加1，因为月份是从0开始计数的
			const day = ('0' + dateObj.getDate()).slice(-2); // 获取当前日期
			const formattedDate = `${year}-${month}-${day}`; // 格式化日期
			// #ifdef MP-TOUTIAO
			// #endif
			if (this.wxsearch == 0) {
				//开启未开启搜索付费
				this.show = false;
				this.list = [];
				this.setPageRandom();
				uni.navigateTo({
					url: `/pages/index/searchList?name=${this.name}&type=${this.type}`
				});
			} else {
				//开启搜索付费
				if (uni.getStorageSync('userSearchData')) {
					let userSearchData = uni.getStorageSync('userSearchData');
					if (formattedDate == userSearchData.date && uni.getStorageSync('uid') == userSearchData.uid) {
						//看过
						this.$refs.popup.open();
					} else {
						this.addTimes(formattedDate);
					}
				} else {
					this.addTimes(formattedDate);
				}
			}
		},
		addTimes(formattedDate) {
			uni.setStorageSync('userSearchData', {
				date: formattedDate,
				uid: uni.getStorageSync('uid')
			});
			this.show = false;
			this.list = [];
			this.setPageRandom();
			uni.navigateTo({
				url: `/pages/index/searchList?name=${this.name}&type=${this.type}`
			});
		},
		setPageRandom() {
			this.kw = '';

			function generateRandomString(length) {
				const chars = '0123456789abcdefghijklmnopqrstuvwxyz'; // 包含的字符
				let result = '';
				for (let i = 0; i < length; i++) {
					const randomIndex = Math.floor(Math.random() * chars.length); // 随机索引
					result += chars[randomIndex];
				}
				return result;
			}
			uni.setStorageSync('sListPageRandom', generateRandomString(10));
		},
		close() {
			this.$refs.popup.close();
		},
		handleok() {
			this.close();
			uni.showLoading({
				title: '加载中...'
			});
			// #ifdef MP-TOUTIAO
			// 先销毁已存在的广告实例，避免重复绑定
			if (this.ad) {
				this.ad.offClose(); // 移除之前的关闭事件监听
				this.ad.destroy(); // 销毁实例
			}
			// 创建新的广告实例
			this.ad = tt.createRewardedVideoAd({
				adUnitId: 'qnyjogx75a7vfoogil'
			});

			// 监听错误
			this.ad.onError((err) => {
				tt.hideLoading();
				uni.hideLoading();
				uni.showToast({
					title: `广告错误: ${err.errCode}`,
					icon: 'none'
				});
			});

			// 定义关闭事件处理函数
			const closeHandler = (data) => {
				// 先移除事件监听，避免重复执行
				this.ad.offClose(closeHandler);

				uni.hideLoading();
				if (data.isEnded) {
					this.$modal.msg('观看完成');
					this.setPageRandom();
					console.log('观看完成');
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/index/searchList?name=${this.name}&type=${this.type}`
						});
					}, 500);
				} else {
					this.$modal.msg('未观看完视频');
				}
				// 完成后销毁实例
				this.ad.destroy();
				this.ad = null;
			};

			// 绑定关闭事件
			this.ad.onClose(closeHandler);

			// 加载并显示广告
			this.ad
				.load()
				.then(() => {
					this.ad.show().catch((err) => {
						console.error('广告显示失败', err);
						uni.hideLoading();
						this.$modal.msg('广告加载失败，请重试');
					});
				})
				.catch((err) => {
					console.error('广告加载失败', err);
					uni.hideLoading();
					this.$modal.msg('广告加载失败，请重试');
				});
			// #endif
		},
		getwebconfig() {
			webconfig({}).then((res) => {
				if (res.code == 200) {
					this.wxsearch = res.data.wxsearch;
					this.verifyUpWx = res.data.verifyUpWx;
					uni.setStorageSync('webconfig', res.data);
				}
			});
		}
	}
};
</script>

<style lang="scss">
$color: #ff6f07;
page {
	background: #f9f9f9;
}

.m-pop {
	width: 620rpx;
	height: 560rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	box-sizing: border-box;
	padding: 20rpx 40rpx 20rpx;
	border-radius: 20rpx;
	background: #fff;
	z-index: 99999;

	.icons {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	image {
		width: 192rpx;
		height: 192rpx;
	}

	.tips {
		margin-top: 40rpx;
		line-height: 40rpx;
		font-size: 32rpx;
		color: #000000;
		text-align: center;
	}

	.btns {
		width: 100%;
		margin-top: 60rpx;

		.btn {
			text-align: center;
			font-size: 32rpx;
			width: calc(50% - 10rpx);
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 20rpx;
		}

		.btn1 {
			background: #f9f9f9;
			color: #d1cdcd;
		}

		.btn2 {
			color: #fff;
			background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
		}
	}
}
.bcg {
	width: 100%;
	height: 800rpx;
	position: fixed;
	top: 0rpx;
}

.container {
	position: absolute;
	top: 284rpx;
	.top_text {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 48rpx;
		color: #11192d;
		margin-left: 40rpx;
		text {
			color: #ff6f07;
		}
	}
}
.index-search {
	width: 670rpx;
	left: 40rpx;
	position: relative;
	margin: 68rpx auto 0rpx;
	.search {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 10rpx 0 0;
		background-color: #fff;
		border-radius: 12rpx;
		.l {
			width: 80rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				width: 2rpx;
				background-color: #eee;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.c {
			flex: 1;
			width: 1rpx;
			margin-left: 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			margin-right: 20rpx;

			input {
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #11192d;
			}
		}

		.r {
			width: 140rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
			border-radius: 16rpx;
		}
	}

	.searchbtns {
		.img {
			width: 148rpx;
			height: 36rpx;
			margin-top: 34rpx;
		}
		.btns {
			display: flex;
			flex-wrap: wrap;
			margin-top: 24rpx;
			.itmes {
				height: 60rpx;
				background: #f2f2f2;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 0rpx 15rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #777777;
				line-height: 60rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				image {
					width: 44rpx;
					height: 44rpx;
					border-radius: 8rpx;
					margin-right: 14rpx;
				}
			}
		}
	}

	.s-list {
		padding: 0 20rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 96rpx;
		background-color: #fff;
		z-index: 999;
		border-radius: 0 0 20rpx 20rpx;

		.item {
			border-bottom: 2rpx solid #eee;
			height: 100rpx;
			line-height: 100rpx;

			&:last-child {
				border-bottom: none;
			}

			.l {
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}

			.c {
				flex: 1;
				width: 1rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				color: #11192d;

				text {
					color: $color;
				}
			}

			.r {
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
}
</style>
